/**
 * 菜单图标颜色配置
 *
 * 说明：
 * 1. 图标颜色主要通过 JavaScript (menu-icon-colors.ts) 动态设置
 * 2. 此 CSS 文件提供基础样式和过渡效果
 * 3. SVG 元素本身就有 vben-menu__icon class
 */

/* ============= 基础样式 ============= */

/* 为所有菜单图标设置基础样式 */
svg.vben-menu__icon {
  /* 默认蓝色（在 JS 加载前显示） */
  color: #1890ff !important;
  fill: currentColor !important;
  /* 平滑过渡动画 */
  transition: color 0.3s ease, filter 0.3s ease;
}

/* ============= 状态样式 ============= */

/* 选中状态 - 稍微加亮 */
.vben-menu .vben-menu-item.is-active svg.vben-menu__icon,
.vben-menu .vben-sub-menu-content.is-active svg.vben-menu__icon {
  filter: brightness(1.2) !important;
}

/* ============= 根据图标库类型设置颜色 ============= */

/* Element Plus 图标 (iconify--ep) - 绿色 - 客户端管理 */
svg.vben-menu__icon[class*="iconify--ep"] {
  color: #52c41a !important;
}

/* Material Design 图标 (iconify--mdi) - 蓝色 - 工作流管理 */
svg.vben-menu__icon[class*="iconify--mdi"] {
  color: #1890ff !important;
}

/* Ant Design 图标 (iconify--ant-design) - 金色 - 待办任务 */
svg.vben-menu__icon[class*="iconify--ant-design"] {
  color: #faad14 !important;
}

/* Tabler 图标 (iconify--tabler) - 根据位置设置不同颜色 */
/* 第1个 tabler 图标 - 流程模型 - 紫色 */
.vben-menu svg.vben-menu__icon[class*="iconify--tabler"]:nth-of-type(1) {
  color: #722ed1 !important;
}

/* 第2个 tabler 图标 - 流程定义 - 橙色 */
.vben-menu svg.vben-menu__icon[class*="iconify--tabler"]:nth-of-type(2) {
  color: #fa8c16 !important;
}

/* 第3个 tabler 图标 - 流程实例 - 绿色 */
.vben-menu svg.vben-menu__icon[class*="iconify--tabler"]:nth-of-type(3) {
  color: #52c41a !important;
}

/* 第4个 tabler 图标 - 开发工具 - 橙色 */
.vben-menu svg.vben-menu__icon[class*="iconify--tabler"]:nth-of-type(4) {
  color: #fa8c16 !important;
}

/* 第5个 tabler 图标 - 图标库 - 粉色 */
.vben-menu svg.vben-menu__icon[class*="iconify--tabler"]:nth-of-type(5) {
  color: #eb2f96 !important;
}

/* Lucide 图标 - 根据位置设置不同颜色 */
/* 系统管理 - 灰色 */
svg.vben-menu__icon[class*="iconify--lucide"]:nth-of-type(1) {
  color: #8c8c8c !important;
}

/* 用户管理 - 紫色 */
svg.vben-menu__icon[class*="iconify--lucide"]:nth-of-type(2) {
  color: #722ed1 !important;
}

/* 角色管理 - 青色 */
svg.vben-menu__icon[class*="iconify--lucide"]:nth-of-type(3) {
  color: #13c2c2 !important;
}

/* 菜单管理 - 橙色 */
svg.vben-menu__icon[class*="iconify--lucide"]:nth-of-type(4) {
  color: #fa8c16 !important;
}

/* API文档 - 青色 */
svg.vben-menu__icon[class*="iconify--lucide"]:nth-of-type(5) {
  color: #13c2c2 !important;
}

/* ============= 工作流图标颜色 ============= */

/* 工作流管理 - 蓝色 */
.vben-menu-item:has([class*="工作流管理"]) svg.vben-menu__icon,
.vben-sub-menu-content:has([class*="工作流管理"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="iconify--mdi"],
svg.vben-menu__icon[class*="lucide-workflow"] {
  color: #1890ff !important;
}

/* 流程模型 - 紫色 */
.vben-menu-item:has([class*="流程模型"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-sitemap"],
svg.vben-menu__icon[class*="lucide-project"] {
  color: #722ed1 !important;
}

/* 流程定义 - 橙色 */
.vben-menu-item:has([class*="流程定义"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-git-branch"],
svg.vben-menu__icon[class*="lucide-network"] {
  color: #fa8c16 !important;
}

/* 流程实例 - 绿色 */
.vben-menu-item:has([class*="流程实例"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-play-circle"] {
  color: #52c41a !important;
}

/* 待办任务 - 金色 */
.vben-menu-item:has([class*="待办任务"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="iconify--ant-design"],
svg.vben-menu__icon[class*="lucide-clock"] {
  color: #faad14 !important;
}

/* 已办任务 - 绿色 */
svg.vben-menu__icon[class*="lucide-check-circle"],
svg.vben-menu__icon[class*="lucide-circle-check"] {
  color: #52c41a !important;
}

/* 图表/监控 - 青色 */
svg.vben-menu__icon[class*="lucide-bar-chart"],
svg.vben-menu__icon[class*="lucide-line-chart"],
svg.vben-menu__icon[class*="lucide-activity"] {
  color: #13c2c2 !important;
}

/* ============= 系统功能图标颜色 ============= */

/* 文件管理 - 黄色 */
svg.vben-menu__icon[class*="lucide-file"],
svg.vben-menu__icon[class*="lucide-folder"] {
  color: #faad14 !important;
}

/* 消息通知 - 红色 */
svg.vben-menu__icon[class*="lucide-bell"],
svg.vben-menu__icon[class*="lucide-message"] {
  color: #f5222d !important;
}

/* 日志 - 灰色 */
svg.vben-menu__icon[class*="lucide-history"] {
  color: #8c8c8c !important;
}

/* ============= 开发工具图标颜色 ============= */

/* 开发工具 - 橙色 */
.vben-menu-item:has([class*="开发工具"]) svg.vben-menu__icon,
.vben-sub-menu-content:has([class*="开发工具"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-wrench"],
svg.vben-menu__icon[class*="lucide-tool"] {
  color: #fa8c16 !important;
}

/* 图标库 - 粉色 */
.vben-menu-item:has([class*="图标库"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-palette"] {
  color: #eb2f96 !important;
}

/* API 文档 - 青色 */
.vben-menu-item:has([class*="API文档"]) svg.vben-menu__icon,
svg.vben-menu__icon[class*="lucide-code"],
svg.vben-menu__icon[class*="lucide-terminal"] {
  color: #13c2c2 !important;
}

/* ============= 特殊状态颜色 ============= */

/* 悬停状态 - 稍微加深 */
.vben-menu-item:hover:not(.is-active) svg.vben-menu__icon {
  filter: brightness(0.85);
}

/* 禁用状态 - 灰色 */
.vben-menu-item.is-disabled svg.vben-menu__icon {
  color: #d9d9d9 !important;
  opacity: 0.5;
}

/* ============= 响应式调整 ============= */

/* 折叠状态下的图标 */
.vben-menu.is-collapse svg.vben-menu__icon {
  font-size: 20px;
}

/* ============= 暗色主题适配 ============= */

/* 暗色主题下的图标颜色调整 */
.dark .vben-menu-item:not(.is-active) svg.vben-menu__icon {
  filter: brightness(1.2);
}

/* 暗色主题下激活状态的图标 */
.dark .vben-menu-item.is-active svg.vben-menu__icon {
  filter: brightness(1.3) !important;
}

/* ============= 自定义颜色类 ============= */

/* 如果需要更精细的控制，可以使用自定义类 */
svg.vben-menu__icon.menu-icon-primary {
  color: #1890ff !important;
}

svg.vben-menu__icon.menu-icon-success {
  color: #52c41a !important;
}

svg.vben-menu__icon.menu-icon-warning {
  color: #faad14 !important;
}

svg.vben-menu__icon.menu-icon-danger {
  color: #f5222d !important;
}

svg.vben-menu__icon.menu-icon-info {
  color: #13c2c2 !important;
}

svg.vben-menu__icon.menu-icon-purple {
  color: #722ed1 !important;
}

svg.vben-menu__icon.menu-icon-pink {
  color: #eb2f96 !important;
}

svg.vben-menu__icon.menu-icon-orange {
  color: #fa8c16 !important;
}

svg.vben-menu__icon.menu-icon-gray {
  color: #8c8c8c !important;
}

